import { FC } from 'react';
import { List } from 'antd';
import { useSelector, useDispatch } from 'umi';

const MyList: FC = () => {
  const data = useSelector((state: any) => state.todolist.data);
  const dispatch = useDispatch();

  const remove = (val: string) => {
    dispatch({
      type: 'todolist/remove',
      payload: val,
    });
  };

  return (
    <>
      <List
        bordered
        dataSource={data}
        renderItem={(item: string) => (
          <List.Item onClick={() => remove(item)}>{item}</List.Item>
        )}
      />
    </>
  );
};

export default MyList;
